<template>
  <view class="coupon">
    <view class="uni-padding-wrap uni-common-mt">
      <uni-segmented-control
        :current="current"
        :values="items"
        :style-type="styleType"
        :active-color="activeColor"
        @clickItem="onClickItem"
      />
    </view>
    <view class="content">
      <view style="height: 100%" v-if="current === 0">
        <Cinema ref="cinemaRef" style="height: 100%" />
      </view>
      <view v-if="current === 1" style="height: 100%">
        <CouponOrder ref="couponOrderRef" style="height: 100%" />
      </view>
      <view v-if="current === 2" style="height: 100%">
        <Ranking style="height: 100%" />
      </view>
    </view>
  </view>
</template>

<script>
import Cinema from "./components/cinema.vue";
import Ranking from "./components/Ranking.vue";
import CouponOrder from "./components/couponOrder.vue";
export default {
  components: { Cinema, Ranking, CouponOrder },
  data() {
    return {
      current: 0,
      items: ["影院", "我的卡券", "排行榜"],
      activeColor: "#27ba9b",
      styleType: "button",
    };
  },
  async onLoad() {
    this.$refs.cinemaRef;
  },
  // 页面级监听下拉刷新（框架会识别此生命周期）
  onPullDownRefresh() {
    // 调用子组件的刷新方法（需子组件暴露该方法）
    // this.$refs.cinemaRef.onPullDownRefresh();
    // 手动停止下拉刷新动画（必须调用，否则动画会一直转）
    uni.$emit("list:refresh");

    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 500);
  },
  onReachBottom() {
    uni.$emit("list:loadmore");
    setTimeout(() => {
      uni.stopLocationUpdate();
    }, 500);
  },
  methods: {
    onClickItem(e) {
      this.current = e.currentIndex;
    },
  },
};
</script>

<style lang="scss" scoped>
.coupon {
  display: flex;
  flex-direction: column;
  .uni-common-mt {
    margin-top: 30px;
    margin-bottom: 10px;
  }

  .uni-padding-wrap {
    // width: 750rpx;
    padding: 0px 30px;
  }

  .content {
    overflow: hidden;
    flex: 1;
  }
}
</style>
